<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tools
          :node-data="company"
          :is-root="true"
          @showAddDialog="showAddDialog"
        />

        <!-- 放置一个el-tree组件 -->
        <el-tree
          :data="depts"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!-- 用了一个行列布局 -->
          <template #default="{ data }">
            <tree-tools
              :node-data="data"
              @reload="getDepts"
              @showAddDialog="showAddDialog"
              @showEditDialog="showEditDialog"
            />
          </template>
        </el-tree>
        <add-dept
          ref="addDeptRef"
          :dialog-visible.sync="dialogVisible"
          :node-data="nodeData"
          :source-depts="sourceDepts"
          @getDepts="getDepts"
          @closeDialog="dialogVisible = false"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import AddDept from './components/AddDept'
import { tranListToTreeData } from '@/utils/index'
import TreeTools from '@/views/departments/components/TreeTools'
import { reqGetDepartments } from '@/api/department'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      dialogVisible: false, // 控制新增部门弹框
      nodeData: {}, // 点击添加按钮传递过来的数据
      sourceDepts: [], // 部门列表的原始数据(未处理成树形结构的数据)
      depts: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      company: {
        name: '',
        manager: '',
        children: [],
        id: ''
      }
    }
  },
  created() {
    this.getDepts()
  },
  methods: {
    async getDepts() {
      const { data } = await reqGetDepartments()
      this.company = {
        name: data.companyName,
        manager: '负责人',
        children: [],
        id: ''
      }
      this.sourceDepts = data.depts
      this.depts = tranListToTreeData(data.depts, '')
      // 筛查一级部门将一级部门列表赋值给company中的children
      this.company.children = data.depts.filter(item => item.pid === '')
    },
    showEditDialog(nodeData) {
      this.dialogVisible = true
      this.nodeData = nodeData
      console.log(nodeData)
      // 通过refs找到子组件addDept, 将nodeData数据交给 form
      // 这种方式实现的数据回显  导致数据会有滞后(不推荐)
      // this.$refs.addDeptRef.form = nodeData
      // 通过refs查找到子组件并调用获取部门详情的方法
      this.$refs.addDeptRef.getDepartDetailById(this.nodeData.id)
      this.$refs.addDeptRef.title = '编辑部门'
    },
    showAddDialog(nodeData) {
      this.dialogVisible = true
      this.nodeData = nodeData
      console.log(nodeData)
      // 直接访问子组件设置对话框的标题
      this.$refs.addDeptRef.title = '新增部门'
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree-node__content{
  height: 40px;
}
.tree-card {
  padding: 20px 20px;
  font-size: 14px;
}
// 直接覆盖树形样式即可
::v-deep .el-tree {
  // 小三角的样式, 去掉默认的小三角的旋转效果
  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  // 有子节点 且未展开 +
  .el-icon-caret-right:before {
    background: url("~@/assets/common/add.png") no-repeat 0 0;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
  // 有子节点 且已展开 -
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url("~@/assets/common/sub.png") no-repeat 0 0;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
  // 没有子节点
  .el-tree-node__expand-icon.is-leaf::before {
    background: url("~@/assets/common/man.png") no-repeat 0 0;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
}
</style>

